import React from 'react';
import { Tag, Badge, Popover, Checkbox } from 'antd';
import styles from './index.less';

const CheckboxGroup = Checkbox.Group;

const releaseStatusMap = {
    0: <Tag>未发布</Tag>,
    1: <Tag color="green">已发布</Tag>,
    2: <Tag color="blue">待审核</Tag>,
    3: <Tag>已下线</Tag>
};

const accountStatusMap = {
    0: <Tag>离线</Tag>,
    1: <Tag color="green">在线</Tag>
};

const badgeMap = {
    0: <Badge status="error" />,
    1: <Badge status="success" />
};

export default function SelectMember({ data = [], value = [], onChange }) {
    const selections = data.filter(item => value.includes(item.channelAccount));

    const renderTrigger = () => {
        if (selections.length === 0) {
            return '--';
        }
        if (selections.length === 1) {
            return (
                <div className={styles.nameWrap}>
                    <div className={styles.name} title={selections[0].accountName}>
                        {selections[0].accountName}
                    </div>
                    <div style={{ paddingLeft: 8 }}>{badgeMap[selections[0].accountStatus]}</div>
                </div>
            );
        }

        const accountStatus = selections.some(item => item.accountStatus === 0) ? 0 : 1;

        return (
            <>
                {`已选择 ${selections.length} 个`}
                <span style={{ paddingLeft: 8 }}>{badgeMap[accountStatus]}</span>
            </>
        );
    };

    const options = React.useMemo(
        () =>
            data.map(item => ({
                label: (
                    <div>
                        {item.accountName}
                        <span style={{ marginLeft: 8 }}>{accountStatusMap[item.accountStatus || 0]}</span>
                        <span style={{ marginRight: 8 }}>{releaseStatusMap[item.releaseStatus || 0]}</span>
                    </div>
                ),
                value: item.channelAccount
            })),
        [data]
    );

    const content = <CheckboxGroup options={options} value={value} onChange={onChange} className={styles.Popover} />;

    if (data.length === 0) {
        return <span style={{ color: 'red' }}>无授权账号</span>;
    }

    return (
        <div className={styles.wrap}>
            <Popover
                placement="bottom"
                trigger="click"
                content={content}
                // getPopupContainer={triggerNode => triggerNode.parentElement}
            >
                <div className={styles.trigger}>{renderTrigger()}</div>
            </Popover>
        </div>
    );
}
